<template>
    <input type="button" value="增加数值" @click="add">
    <br>
    <span>当前数值:{{ number }}</span>
    <br>
    <hr>
    <input type="text" placeholder="输入姓名" ref="name" v-model="uname">
    <br>
    <input type="number" v-model="age">
    <br>
    <hr>
    <input type="text" v-model="goods.number">
    <br>
    <input type="number" v-model="goods.price">
    <br>
    <hr>
    <input type="button" value="增加数值" @click="addNumber">
    <br>
    <span>当前数值:{{ currentNumber }}</span>
    <br>
    <hr>
    <div v-for="(item) of items">
        <input type="checkbox" :value="item.title" v-model="item.status">
        <span :class="{ 'noFinsh': item.status === false, 'Finsh': item.status === true }">{{ item.title }}</span>
    </div>
</template>
<script setup>
import { ref, watch, useTemplateRef, onMounted, reactive } from 'vue'
let number = ref(0)
let age = ref(0)
let uname = ref('')
let items = ref([
    {
        title: '任务1',
        status: false
    },
    {
        title: '任务2',
        status: false
    },
    {
        title: '任务3',
        status: false
    }
])
let currentNumber = ref(0)
var add = () => {
    number.value++;
}
watch(number, (newV, oldV) => {
    console.log('新值:' + newV, '旧值:' + oldV);

})
var input = useTemplateRef('name')
onMounted(() => {
    input.value.focus();
})
watch(uname, (newV, oldV) => {
    console.log(`姓名从${oldV}变成了${newV}`);
})
watch(age, (newV, oldV) => {
    console.log(`年龄从${oldV}变成了${newV}`);
})

let goods = reactive({
    number: 0,
    price: 0
})

watch(goods, (newV, oldV) => {
    console.log('商品信息发生变化');
    console.log('新值:', newV);
    console.log('旧值:', oldV);
})

var addNumber = () => {
    currentNumber.value++
}
watch(currentNumber, (newV, oldV) => {
    console.log('新值:' + newV + '旧值:' + oldV);
}, { immediate: true })

watch(items, (newV, oldV) => {
    console.log(newV);
    console.log(oldV);
}, { deep: true })
</script>
<style scoped>
.noFinsh {
    color: black;
}

.Finsh {
    color: gray;
}
</style>